<template>
  <div style="width:100%;height:100%">
    <h3 style="color:#A3BEDD;font-size:28px;">维保任务完成率时间线走势图</h3>
    <div id="lineChart"></div>
  </div>
</template>
  <script>
import "@/styles/common/childPage.scss";
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
export default {
  name: "LineEcharts",
  data() {
    return {
      month: "09",
      year: "2019",
      
    };
  },
  props: ["domStyle", "lineData"],
  mounted() {
    this.getLine();
  },
  watch: {
    lineData(newval, oldval) {
      this.getLine();
    }
  },
  methods: {
    getLine() {
      this.$nextTick(res => {
        let dom = document.getElementById("lineChart");
        dom.style.width = this.domStyle.width;
        dom.style.height = this.domStyle.height;
        let myChart = echarts.init(dom);
        // let dataX = this.lineData.map((item, index, arr) => {
        //   return item.date;
        // });
        // let dataY = this.lineData.map((item, index, arr) => {
        //   return item.percent;
        // });
        let data = this.lineData;
        for (let i = 0; i < this.lineData.length; i++) {
          if (this.lineData[i].date != undefined) {
            this.month = this.lineData[0].date.substring(0, 2);
          
          }else{
                return false
          }
        }
        let month = this.month;
          let num = this.getCountDays(this.year + "-" + this.month);
        let year = this.year;
        let dataX = [],
          dataY = [];
        let dataY2 = [];
        let result = Array.from({ length: num }, (v, i) => {
          let arr = {};
          arr.date = i < 9 ? month + "-0" + (i + 1) : month + "-" + (i + 1);
          let percent = "";
          percent = data.filter(item => item.date == arr.date);
          arr.percent = percent.length == 1 ? percent[0].percent : "";
          return arr;
        });

        dataY2 = Array.from({ length: num }, (v, i) => {
          let arr = {};
          arr.date = i < 9 ? month + "-0" + (i + 1) : month + "-" + (i + 1);
          let percent = "";
          percent = data.filter(item => item.date == arr.date);
          arr.percent = percent.length == 1 ? percent[0].percent : "";
          return arr;
        });
        for (let i = 0; i < data.length - 1; i++) {
          if (data[i].date != undefined) {
            let day = data[i].date.substring(data[i].date.length - 2) * 1;
            let afterday = data[i];
            let nextday = data[i + 1];
            let daydiff =
              nextday.date.substring(nextday.date.length - 2) -
              afterday.date.substring(afterday.date.length - 2);
            let percentdiff = nextday.percent * 1 - afterday.percent * 1;
            for (let j = 1; j < daydiff; j++) {
              result = result.map(item => {
                let d =
                  afterday.date.substring(afterday.date.length - 2) * 1 + j; //2

                let afterd =
                  afterday.date.substring(afterday.date.length - 2) * 1;

                let _date = d < 10 ? month + "-0" + d : month + "-" + d;

                if (item.date == _date) {
                  item.percent =
                    ((percentdiff * 1.0) / daydiff) * j + afterday.percent * 1;
                }

                return item;
              });
            }
          }else{
            return false
          }
        }
        dataX = result.map(item => item.date);
        dataY = result.map(item => item.percent);
        let option = {
          tooltip: {
            trigger: "item",
            formatter: "{b}：{c}%"
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              splitNumber: 24 * 3600,
              axisLabel: {
                color: "#A3CAFA",
                showMaxLabel: true,
                showMinLabel: true,
                interval: 4
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(70,153,255,.5)"
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(70,153,255,.5)"
                }
              },
              data: dataX
            },
            {
              type: "category",
              boundaryGap: false,
              show: false,
              splitNumber: 24 * 3600,
              axisLabel: {
                color: "#A3CAFA",
                showMaxLabel: true,
                showMinLabel: true,
                interval: 0
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(70,153,255,.5)"
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(70,153,255,.5)"
                }
              },
              data: dataX
            }
          ],
          yAxis: {
            type: "value",
            splitNumber: 7,
            min: 0,
            max: 100,
            axisLabel: {
              color: "#A3CAFA",
              formatter: "{value}%"
            },
            axisLine: {
              lineStyle: {
                color: "rgba(70,153,255,.5)"
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(70,153,255,.5)"
              }
            }
          },

          series: [
            {
              data: dataY,
              type: "line",
              symbol: "circle",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  //左下右上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#4699FF"
                    },
                    { offset: 1, color: "#045D9F" }
                  ]) //改变区域颜色
                }
              },
              itemStyle: {
                normal: {
                  color: "#4699FF", //改变折线点的颜色
                  lineStyle: {
                    color: "#4699FF" //改变折线颜色
                  }
                }
              }
            },
            {
              data: dataY2.map(item => item.percent),
              type: "line",
              symbol: "circle",
              symbolSize: 14,
              xAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#4699FF", //改变折线点的颜色
                  lineStyle: {
                    color: "#4699FF" //改变折线颜色
                  }
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.onresize = myChart.resize;
      });
    },
    getCountDays(date) {
      var curDate = new Date(date);
      /* 获取当前月份 */
      var curMonth = curDate.getMonth();
      /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
      curDate.setMonth(curMonth + 1);
      /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
      curDate.setDate(0);
      /* 返回当月的天数 */
      return curDate.getDate();
    }
  }
};
</script>